<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		    .container {
		    }
		    .container .cart {
		      width: 300px;
		      margin: auto;
		    }
		    .container .title {
		      background-color: lightblue;
		      height: 40px;
		      line-height: 40px;
		      text-align: center;
		      /*color: #fff;*/  
		    }
		    .container .total {
		      background-color: #FFCE46;
		      height: 50px;
		      line-height: 50px;
		      text-align: right;
		    }
		    .container .total button {
		      margin: 0 10px;
		      background-color: #DC4C40;
		      height: 35px;
		      width: 80px;
		      border: 0;
		    }
		    .container .total span {
		      color: red;
		      font-weight: bold;
		    }
		    .container .item {
		      height: 55px;
		      line-height: 55px;
		      position: relative;
		      border-top: 1px solid #ADD8E6;
		    }
		    .container .item img {
		      width: 45px;
		      height: 45px;
		      margin: 5px;
		    }
		    .container .item .name {
		      position: absolute;
		      width: 90px;
		      top: 0;left: 55px;
		      font-size: 16px;
		    }
		
		    .container .item .change {
		      width: 100px;
		      position: absolute;
		      top: 0;
		      right: 50px;
		    }
		    .container .item .change a {
		      font-size: 20px;
		      width: 30px;
		      text-decoration:none;
		      background-color: lightgray;
		      vertical-align: middle;
		    }
		    .container .item .change .num {
		      width: 40px;
		      height: 25px;
		    }
		    .container .item .del {
		      position: absolute;
		      top: 0;
		      right: 0px;
		      width: 40px;
		      text-align: center;
		      font-size: 40px;
		      cursor: pointer;
		      color: red;
		    }
		    .container .item .del:hover {
		      background-color: orange;
		    }
		  </style>
	</head>
	<body>
		<div id="app">
			<div class="container">
				<my-cart></my-cart>
			</div>
		</div>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var CartTitle = {
				props: ['uname'],
				template: `
				<div class="title">{{uname}}的商品</div>
				`
			}
			var CartList = {
				props: ['list'],
				template: `
				<div>
				   <div :key='item.id' v-for='item in list' class="item">
					<img :src="item.img">
					<div class="name">{{item.name}}</div>
					<div class="change">
						<a href="" @click.prevent='sub(item.id)'>-</a>
						<input type="text" class="num"  :value='item.num' @blur='changeNum(item.id,$event)'>
						<a href="" @click.prevent='add(item.id)'>+</a>
					</div>
					<div class="del" @click='del(item.id)'>X</div>
				  </div>
				</div>
				`,
				methods:{
					del:function(id){
						console.log(id);
						this.$emit('cart-del',id);
					},
					sub:function(id){
						this.$emit('change-num',{
							id:id,
							type:'sub'
						});
					},
					add:function(id){
						this.$emit('change-num',{
							id:id,
							type:'add'
						});
					},
					changeNum:function(id,event){
						this.$emit('change-num',{
							id:id,
							type:'change',
							num:event.target.value
						})
					}
				}
			}
			var CartTotle = {
				props: ['list'],
				template: `
				<div class="total">
					<span>总价:{{total}}</span>
					<button>结算</button>
				</div>
				`,
				computed: {
					total: function() {
						var t = 0;
						this.list.forEach(item => {
							t += item.price * item.num;
						});
						return t;
					}

				}
			}
			Vue.component('my-cart', {
				data: function() {
					return {
						uname: '张三',
						list: [{
							id: 1,
							name: 'TCL彩电',
							price: 1000,
							num: 1,
							img: 'img/1.jpeg'
						}, {
							id: 2,
							name: '创维彩电',
							price: 1000,
							num: 1,
							img: 'img/2.jpeg'
						}, {
							id: 3,
							name: '机顶盒',
							price: 1000,
							num: 1,
							img: 'img/3.jpeg'
						}, {
							id: 4,
							name: '海尔冰箱',
							price: 1000,
							num: 1,
							img: 'img/1.jpeg'
						}]
					}
				},
				template: ` 
				 <div class="cart">
					<cart-title :uname='uname'></cart-title>
					<cart-list  :list='list' @change-num='changeNum($event)' @cart-del='delCart($event)'></cart-list>
				    <cart-totle  :list='list'></cart-totle>
				</div>
				`,
				components: {
					'cart-title': CartTitle,
					'cart-list': CartList,
					'cart-totle': CartTotle
				},
				methods:{
					changeNum:function(val){
					if(val.type=='change')
					  {	//console.log(val);
						this.list.some(item=>{
							if(item.id==val.id){
								item.num =val.num;
								return true;
							}
						});
					  }else if (val.type=='sub'){
						  this.list.some(item=>{
						  	if(item.id==val.id){
						  		item.num -= 1;
						  		return true;
						  	}
						  });
					  }else if (val.type=='add'){
						  this.list.some(item=>{
						  	if(item.id==val.id){
						  		item.num += 1;
						  		return true;
						  	}
						  });
					  }
					},
					delCart:function(id){
						var index = this.list.findIndex(item=>{
							return item.id == id;
						});
						this.list.splice(index,1);
					}
				}
			});

			var vm = new Vue({
				el: '#app',
				data: {

				}
			})
		</script>
	</body>
</html>
